/*============ buttons ============*/

.button {
  display: inline-block;
  background-color: var(--first-color);
  color: var(--title-color);
  padding: 1rem 1.75rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;

  &:hover {
    background-color: var(--first-color-alt);
  }

  &-ghost {
    border: 2px solid;
    background-color: transparent;
    border-radius: 3rem;
    padding: .75rem 1.5rem;

    &:hover {
      background: none;
    }
  }

  &-link {
    color: var(--title-color);
  }

  &-flex {
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
  }
}